<template>
  <header :class="['fixedHeader header-wrap', bgClassName]">
    <img class="logo" :src="bgClassName === 'black' ? LogoW : LogoB" alt="logo" title="logo" />
    <div class="menu-box">
      <ChildMenu :list="menuData" />
    </div>
    <div class="phone-menu-box">
      <img :src="MenuIcon" />
      <ChildMenu :list="menuData" />
    </div>
  </header>
</template>

<script>
import { MENU_DATA, HEADER_CLASS_NAME } from '@/constants'
import ChildMenu from './menu.vue'
import LogoW from '@images/logo-w.png'
import LogoB from '@images/logo-b.png'
import MenuIcon from '@images/icon-menu.png'

export default {
  name: 'comHeader',
  components: { ChildMenu },
  data() {
    return {
      LogoW,
      LogoB,
      MenuIcon,
      menuData: JSON.parse(JSON.stringify(MENU_DATA)),
    }
  },
  computed: {
    bgClassName() {
      return this.$store.state.currentRoute.indexOf('news') >= 0 ? 'black' : HEADER_CLASS_NAME[this.$store.state.currentRoute] || ''
    },
  },
  created() {
    this.buildMenu(this.menuData)
    console.log(this.menuData)
  },
  mounted() {
    //window.addEventListener('scroll', this.initScroll)
    document.querySelector('main').addEventListener('touchstart', () => {
      document.querySelector('.phone-menu-box > ul').style.display = 'none'
    })
  },
  methods: {
    initScroll() {
      const scrollTop = parseInt(window.scrollY)
      const fixedHeaderEl = document.querySelector('.fixedHeader')
      scrollTop > 100 ? fixedHeaderEl.classList.add('fixed') : fixedHeaderEl.classList.remove('fixed')
    },
    buildMenu(list) {
      list.map(item => {
        item.text = this.$store.state.languageData[item.value] || ''
        if (item.child?.length) {
          this.buildMenu(item.child)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
@lw: 150px;

.header-wrap {
  z-index: 9999;
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  background-color: @headerBgColor;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: @headerH;
  padding: 0 @pre-padding;
  &.fixed {
    position: fixed;
  }
  .logo {
    display: block;
    flex: none;
    width: 15rem;
  }
  .phone-menu-box {
    display: none;
    position: absolute;
    left: 0;
    padding-left: @normal;
    img {
      width: 30px;
    }
    & > ul {
      display: none;
      position: absolute;
      left: 0;
      min-width: 120px;
      background-color: #000;
      /deep/li {
        display: block;
        text-align: left;
        span:hover,
        a:hover {
          transform: scale(1);
        }
        & > ul {
          top: 0;
          left: 100%;
        }
      }
    }
  }
}
</style>
